<template>
  <v-card class="mx-auto  my-card" max-width="400">
    <v-list
      class="scroll-y"
      dense
      height="770px"
      subheader
      two-line
    >
      <div class="search-container">
        <!-- 搜索框 -->
        <v-text-field
          v-model="searchQuery"
          flat
          hide-details
          label="Search reports"
          prepend-inner-icon="mdi-magnify"
          solo-inverted
        ></v-text-field>

        <!-- 搜索按钮 -->
        <v-btn class="aob" icon @click="onSearchClick">
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
      </div>

      <!-- 列表项，包括图片和文本 -->
      <v-list-item-group>
        <v-list-item
          v-for="(item, i) in items"
          :key="i"
          :class="{ selected: item.selected }"
          class="v-list-item-custom"
          @click="toggleSelect(i)"
        >

          <!-- 使用Flexbox布局 -->
          <div class="flex-container">
            <!-- 图片显示在这里，宽高拉伸为100px -->
            <v-img :src="item.image" height="100px" width="100px"></v-img>
            <!-- 文本放在图片的右边 -->
            <div class="text-container">
              <v-list-item-title>{{ item.text }}</v-list-item-title>
            </div>
          </div>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>

<script lang="ts">
import axios from 'axios'; // 引入axios

export default {
  data: () => ({
    searchQuery: '',
    items: [] as { text: string; image: string; selected: boolean }[],
  }),
  mounted() {
    // 页面加载时执行搜索
    this.onSearchClick();
  },
  methods: {
    // ...方法...
    onSearchClick() {
      // 点击搜索按钮时执行的方法
      this.items = [];
      axios.post("http://47.113.189.87:8080/animals/searchAnimals", {
        keyWord: this.searchQuery // 使用搜索框的值作为查询参数
      })
        .then(response => {
          // 请求成功处理
          // 可在此处处理返回的数据，例如更新列表显示
          for (const itemData of response.data.data) {
            const imageElement = document.createElement('img');
            imageElement.src = itemData.imageUrl; // 设置图片的路径

            // 设置图片的样式，限制大小并创建圆形效果
            imageElement.style.width = '100px'; // 设置图片宽度
            imageElement.style.height = '100px'; // 设置图片高度
            //imageElement.style.objectFit = 'cover'; // 填充容器并保持宽高比
            imageElement.style.borderRadius = '50%'; // 将图片边框设为圆形

            // 将图片添加到页面或列表中
            this.items.push({
              text: itemData.name, // 使用从服务器获取的文本数据
              image: imageElement.src, // 使用创建的图片元素
              selected: false // 初始状态设置为未选中
            });
          }
        })
        .catch(error => {
          // 请求失败处理
          console.error(error);
        });
    },
    toggleSelect(selectedIndex: number) {
      // 首先将所有项目的selected属性设置为false
      this.items.forEach((item) => {
        item.selected = false;
      });
      // 然后将点击的项目的selected属性设置为true
      this.items[selectedIndex].selected = true;
      // 在子组件的某个方法中
      this.$emit('updateItems', this.items);
    },
  }
}
</script>

<style scoped>
.scroll-y {
  overflow-y: auto;
}

.search-container {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  width: 400px;
  margin-top: -10px;
}

.my-card { /* 自定义v-card的样式 */
  margin: 0; /* 设置外边距为0 */
}

.selected {
  border: 2px solid rgb(120, 179, 252); /* 选中时的边框样式 */
  /* 可根据需要添加其他样式 */
}

/* Flexbox布局样式 */
.flex-container {
  display: flex;
  align-items: center;
}

.flex-container {
  height: 100px !important;
  width: 100px !important;
}

.text-container {
  flex-grow: 1;
  margin-left: 16px; /* 为文本添加一些间距 */
}

.aob {
  margin-left: -90px;
}

.img {
  border-radius: 30px;
}

.v-card {
  border-radius: 25px;
}
</style>
